<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" style="display: flex;justify-content: space-between;">
          <div style="display: flex;height:100%;align-items: center;">
            <div class="report_header_left"></div>
            <div class="report_header_date">
              <queryDate v-loadMore="[payLoads,'performanceStatistics-detailslist']" @queryDateClick='queryDateClick' :endDate="query.endDate" :beginDate="query.beginDate"></queryDate>
            </div>
            <div class="report_header_query">
              <queryMember @queryMemberClick="queryMemberClick" :membername="membername"></queryMember>
            </div>
          </div>
          <div style="display: flex;">
            <el-button style="margin-left: 10px" size="small" type="primary" @click="loadOrder">查询</el-button>
            <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;">
          <el-table-column prop="sn" label="订单号" header-align="center" align="center" :show-overflow-tooltip="true" width="150">
          </el-table-column>
          <el-table-column align="center" prop="createDate" label="创建时间" sortable="custom" width="170">
            <template slot-scope="{row}">
              <span style="margin-left: 10px">{{row.createDate | datetimeFormatter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="orderDate" label="销售日期" sortable="custom" width="170">
            <template slot-scope="{row}">
              <span style="margin-left: 10px">{{row.orderDate | datetimeFormatter}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="orderDate" label="客户信息" sortable="custom" width="250">
            <template slot-scope="{row}">
              <span style="margin-left: 10px">{{row.consignee}}{{row.phone }}{{row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="memberCode" label="客户编号" header-align="center" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shopName" label="门店名称" header-align="center" align="center" :show-overflow-tooltip="true" width="150">
          </el-table-column>
          <el-table-column prop="subQuantity" label="商品总数" header-align="center" align="center" :show-overflow-tooltip="true" width="80">
          </el-table-column>
          <el-table-column prop="subPrice" label="商品金额" header-align="center" align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="discount" label="店铺优惠" header-align="center" align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="amountPaid" label="实付金额" header-align="center" align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column prop="statusDescr" label="状态" header-align="center" align="center" :show-overflow-tooltip="true" width="120">
          </el-table-column>
          <el-table-column align="center" label="查看详情" width="100">
            <template slot-scope="scope">
              <div class="justify_right shop_Height" @click="clicklookorder(scope.row)"
                   v-if="scope.$index != tableData.length-1">
                <a class="details_Title">查看订单</a>
              </div>
            </template>
          </el-table-column>

        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import Pagination from '@/components/Pagination';
import ExportList2Excel from "@/components/ExportList2Excel";
import {
  detailList
} from '@/api/resultSaleReport'
import utils from '@/utils/utils'
import loadMore from '@/utils/more.js'
//条件组件
import queryDate from './components/Query/queryDate'
import queryShop from '@/components/Query/queryShop'
import queryOffice from '@/components/Query/queryOffice'
import queryProduct from '@/components/Query/queryProduct'
import queryMember from './components/Query/queryMember'
import queryProductCategory from '@/components/Query/queryProductCategory'
import permission from "@/directive/permission";

export default {
  name: 'performanceStatistics-detailslist',
  data() {
    return {
      printing: 5000,//打印数量设置
      query: {
        shopId: '',
        productCategoryId: '',
        officeId: '',
        endDate: '',
        beginDate: '',
        productId: '',
        memberId: '',
        groupBuyId:''
      },
      tableData: [],
      curHeight: null,
      pageSize: 20,
      pageSizetwo: 100,
      total: 0,
      pageNum: 1,
      summaryForm: {
        quantity: 0,
        discount: 0,
        totalCost: 0,
        maoli: 0,
        maolilv: 0,
        totalAmt: 0
      },
      productId: "",
      beginDate: "",
      endDate: "",
      officeId: "",
      shopname: "",
      opdertotal: '',
      membername:'',
      payLoads:''
    }
  },
  activated() {
    this.payLoads = new Date().getTime();
  },
  directives: {
    elDragDialog,loadMore
  },
  created() {
      this.query.memberId = this.$route.query.id;
      this.query.beginDate = this.$route.query.beginDate,
      this.query.endDate = this.$route.query.endDate,
      this.membername = this.$route.query.membername
      var _this = this
      _this.loadOrder()
  },
  components: {
    Pagination,
    queryDate,
    queryShop,
    queryOffice,
    queryProduct,
    queryMember,
    queryProductCategory,
    ExportList2Excel
  },
  filters: {
    watchStatus(val) {
      if (val == 0) {
        return '待付款'
      } else if (val == 1) {
        return '已付款'
      } else if (val == 2) {
        return '待退款'
      } else if (val == 3) {
        return '已退款'
      }
    },
    watchDiscount (val) {
      if (val === undefined) {
        return 0
      } else {
        return val
      }
    },
    watchShippingMethod(val){
      if (val == 0) {
        return '普通快递'
      } else if (val == 1) {
        return '到店提货'
      } else if (val == 2) {
        return '同城配送'
      } else {
        return '待发货'
      }
    },
  },
  watch: {
    $route(newVal, oldVal) {
      console.log("1111111111111111111111111")
      if ( newVal.query.id != this.query.memberId || newVal.query.beginDate != this.query.beginDate || newVal.query.endDate != this.query.endDate || newVal.query.membername != this.query.membername) {
        console.log("2222222222222222222222222222222")
        if(newVal.query.id != null ){
          console.log("333333333333333333333333333333333333")
          this.query.memberId = newVal.query.id
          this.query.beginDate = newVal.query.beginDate
          this.query.endDate = newVal.query.endDate
          this.membername = newVal.query.membername
          this.loadOrder()
        }
      }

    },
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
    clicklookorder(data) {
      if (data.orderType == 0) {
        this.$router.push({path: '/order/view', query: {id: data.orderId}})
      } else if (data.orderType == 1) {
        this.$router.push({path: '/askfor/view', query: {id: data.orderId}})
      }
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
    queryShopClick(data) {
      this.query.shopId = data.shopId
    },
    queryOfficeClick(data) {
      this.query.officeId = data.officeId
    },
    queryProductClick(data) {
      this.query.productId = data.productId

    },
    queryMemberClick(data) {
      this.query.memberId = data.memberId

    },
    queryProductCategoryClick(data) {
      this.query.productCategoryId = data.productCategoryId
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 224 //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224 //减去页面上固定高度height
    },
    //下载模板的函数
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data = {}
      data.tHeader = ["订单号", "创建时间",   '销售日期'    ,  '姓名'    ,'电话' ,      '地址'  ,   '客户编号'   ,'仓库名称'  ,"状态"        ,"商品总数"      ,"商品金额"   ,"店铺优惠","实付金额" ]
      data.filterVal = ['sn', "createDate",  "orderDate", "consignee","phone"  ,   "address", 'memberCode','shopName' ,"statusDescr","subQuantity" ,"subPrice"  ,"discount","amountPaid"]
      data.filename = "业绩明细表";
      var params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.printing)
      params.append('officeId', this.query.officeId)
      params.append('productId', this.query.productId)
      params.append('memberId', this.query.memberId)
      detailList(params).then(res => {
        data.list=res.data.data
        data.list.forEach(item => {
          item.createDate = utils.dateFormatter(item.createDate)
          item.shippingMethod = this.$options.filters['watchShippingMethod']( item.shippingMethod )
          item.orderDate = utils.dateFormatter(item.orderDate)
        })
        _this.$refs.exportList2Excel.handleDownload(data);
        loading.close();
        if (data.list.length == this.printing) {
          this.pageNum++
          this.handleExport()
        } else {
          return;
        }
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
      })
    },
    loadOrder() {
      var _this = this
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('memberId', this.query.memberId)
      detailList(params).then(response => {
        _this.tableData = response.data.data
        _this.total = response.data.total
        this.summaryClick()
      }).catch(error => {
      })
    },
    summaryClick() {
      var _this = this
      const params = new URLSearchParams()
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('officeId', this.query.officeId)
      params.append('shopId', this.query.shopId)
      params.append('productCategoryId', this.query.productCategoryId)
      params.append('productId', this.query.productId)
      params.append('memberId', this.query.memberId)
      params.append('groupBuyId', this.query.groupBuyId)
      orderSummary(params).then(response => {
        if (response.data.payableCount == null){
          response.data.payableCount=0
        }
        if (response.data.subPriceCount == null){
          response.data.subPriceCount=0
        }
        _this.tableData.push(response.data)
      }).catch(error => {
      })
    },
    totalLine({
                row,
                column,
                rowIndex,
                columnIndex
              }) {
      var _this = this
    },
  }
}
</script>

<style scoped>
.details_Title {
  font-size: 14px;
  color: #409EFF;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.report_header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 260px;
}

.report_header_query {
  margin-left: 10px;
  width: 130px;
}


.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/ .el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}


.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/ .el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/ .el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/ .el-header {
  padding: 10px;
}

/deep/ .pagination-container {
  margin-top: 0 !important;
}
</style>
